import React, { useRef } from 'react';
import { Form, Select, InputNumber, Tooltip, Row, Col, Card, Space, Switch } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import AdvancedWrap from '@/components/AdvancedWrap';
import { scrollToFirstError } from '@/utils';
import Name from '../../components/items/Name';
import HTTP from '../../components/items/HTTP';
import BasicAuth from '../../components/items/BasicAuth';
import SkipTLSVerify from '../../components/items/SkipTLSVerify';
import Headers from '../../components/items/Headers';
import Description from '../../components/items/Description';
import Footer from '../../components/items/Footer';
import Cluster from '../../components/items/Cluster';

export default function FormCpt({ action, data, onFinish, submitLoading }: any) {
  const { t } = useTranslation('datasourceManage');
  const [form] = Form.useForm();
  const clusterRef = useRef<any>();

  return (
    <Form
      form={form}
      layout='vertical'
      onFinish={(values) => {
        onFinish(values, clusterRef.current);
      }}
      onFinishFailed={() => {
        scrollToFirstError();
      }}
      initialValues={data}
      className='settings-source-form'
      data-oid='wy8yprp'
    >
      <Card title={t(`${action}_title`)} data-oid='9.bq.3p'>
        <Name data-oid='u3wi998' />
        <HTTP placeholder='http://localhost:9200' multipleUrls data-oid='es0ovkc' />
        <BasicAuth data-oid='q:fxqa_' />
        <SkipTLSVerify data-oid='_p0rhc4' />
        <Headers data-oid='v3s_km6' />
        <div className='page-title' style={{ marginTop: 0 }} data-oid='u441bfv'>
          {t('form.other')}
        </div>
        <Row gutter={8} data-oid='8pkizw4'>
          <Col span={8} data-oid='9gyy2ga'>
            <Form.Item label={t('form.es.version')} name={['settings', 'version']} rules={[]} initialValue='7.0+' data-oid='f1iqtfa'>
              <Select
                options={[
                  { lebel: '6.0+', value: '6.0+' },
                  { lebel: '7.0+', value: '7.0+' },
                ]}
                data-oid='nezh-kj'
              ></Select>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='gqvmv3.'>
            <Form.Item label={t('form.es.max_shard')} name={['settings', 'max_shard']} rules={[{ type: 'number', min: 0 }]} initialValue={5} data-oid='5:k50z.'>
              <InputNumber style={{ width: '100%' }} controls={false} data-oid='i1z1mum' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='.cpa0cq'>
            <Form.Item
              label={
                <>
                  <span data-oid='5btlrkc'>{t('form.es.min_interval')}</span>
                  <Tooltip title={t('form.es.min_interval_tip')} data-oid='y0qogs8'>
                    <InfoCircleOutlined className='ml8' data-oid='mfw53jv' />
                  </Tooltip>
                </>
              }
              name={['settings', 'min_interval']}
              rules={[{ type: 'number', min: 0 }]}
              initialValue={10}
              data-oid='-dfnn8y'
            >
              <InputNumber style={{ width: '100%' }} controls={false} data-oid='pgl4_zc' />
            </Form.Item>
          </Col>
        </Row>
        <AdvancedWrap var='VITE_IS_PRO,VITE_IS_ENT' data-oid='3cjukf5'>
          <Space className='mb8' data-oid='ga525g8'>
            <span data-oid='lljyczj'>{t('form.es.enable_write')}</span>
            <Form.Item name={['settings', `enable_write`]} valuePropName='checked' noStyle data-oid='l09r5z0'>
              <Switch data-oid='d4l-6xf' />
            </Form.Item>
          </Space>
          <Cluster form={form} clusterRef={clusterRef} data-oid='oc-x-rj' />
        </AdvancedWrap>
        <Description data-oid='hhk.mlz' />
      </Card>
      <Footer id={data?.id} submitLoading={submitLoading} data-oid='ma05xdt' />
    </Form>
  );
}
